<template>
  <div class="wrapper">
    <div class="wrapper-header">产品列表</div>
    <a-card>
      <a-flex justify="space-between" class="margin-bottom">
        <a-space>
          <a-button type="primary" @click="showAddModal"><plus-outlined/>新建</a-button>
          <a-button>批量<down-outlined class="ant-icon-down"/></a-button>
          <a-divider type="vertical"/>
          <a-button><upload-outlined/>导入</a-button>
        </a-space>
        <a-space>
          <a-select name="category_id" class="width-sm" placeholder="分类"></a-select>
          <a-select name="status" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">上架</a-select-option>
            <a-select-option :value="0">下架</a-select-option>
          </a-select>
          <a-input-search name="keyword" placeholder="请输入关键字搜索"/>
          <a-divider type="vertical"/>
          <a-button><download-outlined/>导出</a-button>
        </a-space>
      </a-flex>
      <a-table :columns="columns" row-key="id" :row-selection="{name:'id'}">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a @click="showEditModal(record)">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a>更多<down-outlined /></a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>详情</a-menu-item>
                    <a-menu-item>复制</a-menu-item>
                    <a-menu-item>删除</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    
    <!-- 产品模态框 -->
    <ProductModal v-model:visible="modalVisible" v-model:product-data="currentProduct" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PlusOutlined,
  DownOutlined,
  UploadOutlined,
  DownloadOutlined } from "@ant-design/icons-vue";
import ProductModal from './components/ProductModal.vue';

// 模态框可见性
const modalVisible = ref(false);

// 当前编辑的产品数据
const currentProduct = ref();

const columns = [
    {title: 'ID', dataIndex: 'id', key: 'id', width:80},
    {title: '产品名称', dataIndex: 'name', key: 'name'},
    {title: '分类', dataIndex: 'category_id', key: 'category_id', width: 150},
    {title: '价格', dataIndex: 'price', key: 'price', width: 120},
    {title: '状态', dataIndex: 'status', key: 'status',width: 80},
    {title: '操作', key: 'action', width: 240}
];

// 显示新增模态框
const showAddModal = () => {
  currentProduct.value = null;
  modalVisible.value = true;
};

// 显示编辑模态框
const showEditModal = (record: any) => {
  currentProduct.value = { ...record };
  modalVisible.value = true;
};
</script>

<style scoped>

</style>